<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">应用分组</h5>
                    <div class="stayRight ">
                        <el-button @click="refreshData()">刷新</el-button>
                        <el-button type="primary" @click="updateAppGroup()">创建组</el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="apps.searchName" placeholder="请输入要搜索的组名"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="getAppGroups(1)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="apps.dataArr" border style="width: 100%">
                    <el-table-column prop="name" label="分组名称" > </el-table-column>
                    <el-table-column prop="health" label="健康实例数" :formatter="formatHealth"> </el-table-column>
                    <el-table-column prop="serverSum" label="服务器总数" :formatter="formatServerSum"> </el-table-column>
                    <el-table-column prop="resourceTypeSum" label="资源类型总数" :formatter="formatResourceTypeSum"> </el-table-column>
                    <el-table-column prop="notHealthSum" label="不健康实例数" :formatter="formatNotHealthSum"> </el-table-column>
                    <el-table-column prop="time" label="创建时间" :formatter="formatTime"> </el-table-column>
                    <el-table-column label="操作" >
                      <template scope="scope">
                        <el-dropdown trigger="click" @command="handleCommand">
                          <el-button type="primary" size="small">
                            管理 <i class="el-icon-caret-bottom el-icon-right"/>
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="'this.enableAlarm('+scope.row.id+')'">启用报警</el-dropdown-item>
                            <el-dropdown-item :command="'this.disableAlarm('+scope.row.id+')'">禁用报警</el-dropdown-item>
                            <el-dropdown-item divided :command="'this.updateAppGroup('+scope.row.id+')'">编辑组</el-dropdown-item>
                            <el-dropdown-item :command="'this.delAppGroup('+scope.row.id+')'">删除组</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="apps.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="apps.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="apps.totalCount">
                        </el-pagination>
                    </div>
                </div>
            </section>
            
            <el-dialog :title="updateTitle" :visible.sync="updateDialogVislble" class="customDialog team" :lock-scroll="false" size="full" :before-close="colseDialog">
                <div class="scoreContainer tagCategory">
                    <el-form :model="updateForm" :rules="updateRules" ref="updateForm" label-width="120px" class="demo-updateForm">
                        <el-form-item label="产品组名称" prop="name">
                          <el-input v-model="updateForm.name"></el-input>
                        </el-form-item>

                        <div class="aar-gap">
                        	<div class="aar-gap-index">1</div>
                        	<div class="aar-gap-title ng-binding">添加实例</div>
                        	<div class="aar-gap-line-c">
                        		<div class="aar-gap-line"></div>
                        	</div>
                        </div>
                        <el-form-item label="搜索实例">
                            <section class="searchBar">
                                <div class="form-inline">
                                    <div class="pull-left">
                                        <div class="searchSel">
                                            <el-select v-model="ins.type" placeholder="实例类型">
                                                <el-option v-for="item in ins.types" :key="item.id" :value="item.id" :label="item.name">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="searchIpt">
                                            <el-input v-model="ins.searchName" placeholder="请输入要搜索的实例名"></el-input>
                                        </div>
                                        <div class="searchbtn">
                                            <el-button @click="getInstances(1)">搜索</el-button>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </el-form-item>
                        <el-form-item :label="'已添加实例('+updateForm.instances.length+')'">
                          <el-tag :key="insTag.id"
                        		v-for="insTag in updateForm.instances"
                        		closable
                        		@close="insHandleClose(insTag)"
                        		style="margin-right:5px;">
                        		{{insTag.name}}
                          </el-tag>
                        </el-form-item>
                        <el-form-item label="">
                          <el-table :data="ins.dataArr" border style="width: 100%" @selection-change="insHandleSelectionChange" :row-class-name="tableRowClassName" ref="insTable">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="id" label="实例id"> </el-table-column>
    		                    <el-table-column prop="os" label="操作系统" > </el-table-column>
    		                    <el-table-column prop="name" label="主机名" > </el-table-column>
    		                    <el-table-column prop="ip" label="IP地址" > </el-table-column>
    		                    <el-table-column label="操作">
                              <template scope="scope">

                                <el-button  size="small"  type="text"  v-if="!insCheckExist(scope.row.id)" @click="insHandleOpen(scope.row)">添加到组</el-button>
                                <el-button  size="small"  type="text"  v-else @click="insHandleClose(scope.row)">从组中移除</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-form-item>
                        <el-form-item label="">
                            <div class="pageSIzeblock">
                              <div class="pullLeft">
                                <el-button  size="small" name="button-del" @click="insBatchAdd()" :disabled="!ins.selection.length">批量添加</el-button>
                                <el-button  size="small" name="button-del"  @click="insBatchDel()" :disabled="!ins.selection.length">批量移除</el-button>
                                &nbsp;*注 红色标注的实例已分配其他分组
                              </div>
                              <div class="pullright">
                                  <el-pagination @size-change="insHandleSizeChange"  @current-change="insHandleCurrentChange" :current-page="ins.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="ins.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="ins.totalCount">
                                  </el-pagination>
                              </div>
                            </div>
                        </el-form-item>        
                        

                        <div class="aar-gap">
                            <div class="aar-gap-index">2</div>
                            <div class="aar-gap-title ng-binding">添加成员</div>
                            <div class="aar-gap-line-c">
                                <div class="aar-gap-line"></div>
                            </div>
                        </div>
                        <el-form-item label="搜索成员">
                            <section class="searchBar">
                                <div class="form-inline">
                                    <div class="pull-left">
                                        <div class="searchIpt">
                                            <el-input v-model="users.searchName" placeholder="请输入要搜索的用户名或邮箱"></el-input>
                                        </div>
                                        <div class="searchbtn">
                                            <el-button @click="getUsers(1)">搜索</el-button>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </el-form-item>
                        <el-form-item :label="'已添加成员('+updateForm.users.length+')'">
                          <el-tag :key="userTag.userId"
                                v-for="userTag in updateForm.users"
                                closable
                                @close="userHandleClose(userTag)"
                                style="margin-right:5px;">
                                {{userTag.username || userTag.email}}
                          </el-tag>
                        </el-form-item>
                        <el-form-item label="">
                          <el-table :data="users.dataArr" border style="width: 100%" @selection-change="userHandleSelectionChange" :row-class-name="tableRowClassName" ref="userTable">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="userId" label="用户id"> </el-table-column>
                            <el-table-column prop="username" label="用户名" > </el-table-column>
                            <el-table-column prop="remarkname" label="中文名" > </el-table-column>
                            <el-table-column prop="email" label="邮箱" > </el-table-column>
                            <el-table-column label="操作">
                              <template scope="scope">
                                <el-button  size="small"  type="text"  v-if="!userCheckExist(scope.row.userId)" @click="userHandleOpen(scope.row)">添加到组</el-button>
                                <el-button  size="small"  type="text"  v-else @click="userHandleClose(scope.row)">从组中移除</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-form-item>
                        <el-form-item label="">
                            <div class="pageSIzeblock">
                              <div class="pullLeft">
                                <el-button  size="small" name="button-del" @click="userBatchAdd()" :disabled="!users.selection.length">批量添加</el-button>
                                <el-button  size="small" name="button-del"  @click="userBatchDel()" :disabled="!users.selection.length">批量移除</el-button>
                                &nbsp;*注 红色标注的用户已分配其他分组
                              </div>
                              <div class="pullright">
                                  <el-pagination @size-change="userHandleSizeChange"  @current-change="userHandleCurrentChange" :current-page="users.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="users.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="users.totalCount">
                                  </el-pagination>
                              </div>
                            </div>
                        </el-form-item>  
                        
                        <div class="aar-gap">
                            <div class="aar-gap-index">3</div>
                            <div class="aar-gap-title ng-binding">报警规则</div>
                            <div class="aar-gap-line-c">
                                <div class="aar-gap-line"></div>
                            </div>
                        </div>
                        <el-form-item label="报警开关">
                          <el-select v-model="updateForm.alarmStatus" placeholder="请选择">
                            <el-option 
                                v-for="item in apps.status" 
                                :key="item.id" 
                                :value="item.id" 
                                :label="item.text">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="选择模板">
                           <el-select v-model="updateForm.alarmTempletIds" multiple placeholder="请选择">
                            <el-option
                              v-for="item in alarmTemplets.dataArr"
                              :key="item.id"
                              :value="item.id"
                              :label="item.name">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="通知对象">
                            <el-transfer 
                              filterable
                             :footer-format="{
                                noChecked: '共${total}项',
                                hasChecked: '已选${checked}/${total} 项'
                              }"
                             :titles="['未选联系人组', '已选联系人组']"  
                             v-model="updateForm.contactIds" 
                             :data="contacts.dataArr"> 
                            </el-transfer>
                        </el-form-item>

                    </el-form>
                </div>

                <span slot="footer" class="dialog-footer">
                    <div class="aar-gap">
                        <div class="aar-gap-line-b">
                            <div class="aar-gap-line"></div>
                        </div>
                    </div>
                  <el-button @click="cancelSubmit('updateForm')">取 消</el-button>
                  <el-button type="primary" @click="creatSubmit('updateForm')">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import { save, queryAppGroups, updateAlarmStatus, update, deleteById, queryInstances, queryAllTypeList, queryUsers, check } from '@/api/appGroupData'
import { getAlarmContactsGroupList, getAllList } from '@/api/alarmRulesData'
import { Loading } from 'element-ui'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      apps: {
        dataArr: [],
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
        searchName: '',
        status: [
          {
            id: 1,
            text: '开启'
          },
          {
            id: 0,
            text: '关闭'
          }
        ]
      },
      ins: {
        dataArr: [],
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
        type: '',
        searchName: '',
        selection: [],
        types: []
      },
      users: {
        dataArr: [],
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
        searchName: '',
        selection: []
      },
      contacts: {
        dataArr: []
      },
      alarmTemplets: {
        dataArr: []
      },
      updateTitle: '',
      updateDialogVislble: false,
      updateForm: {
        name: '',
        alarmStatus: 1,
        dutyName: '',
        users: [],
        instances: [],
        contactIds: [],
        alarmTempletIds: []
      },
      updateRules: {
        name: [
          { validator: this.checkName, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAppGroups(1)
    this.getAllTypeList()
    this.getInstances(1)
    this.getUsers(1)
    this.getContacts()
    this.getAlarmTemplets()
  },
  methods: {
    refreshData() {
      this.apps.searchName = ''
      this.getAppGroups(1)
      this.ins.type = ''
      this.ins.searchName = ''
      this.getInstances(1)
      this.users.searchName = ''
      this.getUsers(1)
    },
    getAppGroups(currPage) {
      this.apps.currPage = currPage
      var loadId = Loading.service({ text: '加载中，请稍等' })
      var listQuery = { keyword: this.apps.searchName, currPage: this.apps.currPage, pageSize: this.apps.pageSize }
      queryAppGroups(listQuery).then(response => {
        this.apps.dataArr = response.data.page.list
        loadId.close()
        this.apps.totalCount = response.data.page.totalCount
      }).catch(_ => {
        loadId.close()
      })
    },
    getAllTypeList() {
      queryAllTypeList().then(response => {
        this.ins.types = [{ id: '', name: '全部' }].concat(response.data.rows)
      }).catch(_ => {
      })
    },
    getInstances(currPage) {
      this.ins.currPage = currPage
      var loadId = Loading.service({ text: '加载中，请稍等' })
      var listQuery = { typeId: this.ins.type, keyword: this.ins.searchName, currPage: this.ins.currPage, pageSize: this.ins.pageSize }
      queryInstances(listQuery).then(response => {
        this.ins.dataArr = response.data.page.list
        loadId.close()
        this.ins.totalCount = response.data.page.totalCount
      }).catch(_ => {
        loadId.close()
      })
    },
    getUsers(currPage) {
      this.users.currPage = currPage
      var loadId = Loading.service({ text: '加载中，请稍等' })
      var listQuery = { keyword: this.users.searchName, currPage: this.users.currPage, pageSize: this.users.pageSize }
      queryUsers(listQuery).then(response => {
        this.users.dataArr = response.data.page.list
        this.users.totalCount = response.data.page.totalCount
        loadId.close()
      }).catch(_ => {
        loadId.close()
      })
    },
    getContacts() {
      getAlarmContactsGroupList().then(response => {
        response.data.data.forEach(function(element) {
          this.contacts.dataArr.push({
            key: element.id,
            label: element.name
          })
        }, this)
      }).catch(_ => {
      })
    },
    getAlarmTemplets() {
      getAllList().then(response => {
        this.alarmTemplets.dataArr = response.data.data
      }).catch(_ => {
      })
    },
    formatHealth(row, column) {
      return row.instances.filter(function(item) {
        if (item.status) {
          return true
        }
      }).length
    },
    formatServerSum(row, column) {
      return row.instances.length
    },
    formatResourceTypeSum(row, column) {
      var types = new Set()
      row.instances.forEach(function(item) {
        types.add(item.typeId)
      })
      return types.size
    },
    formatNotHealthSum(row, column) {
      return row.instances.filter(function(item) {
        if (item.status) {
          return false
        }
      }).length
    },
    formatTime(row, column) {
      if (row.updateTime) {
        return parseTime(row.updateTime)
      }
      return ''
    },
    checkName(rule, value, callback) {
      if (callback) {
        if (!value) {
          callback(new Error('分组名不能为空'))
        } else {
          var listQuery = { id: this.updateForm.id, name: value }
          check(listQuery).then(response => {
            if (response.data.msg) {
              callback(new Error(response.data.msg))
            }
            callback()
          })
        }
      }
    },
    checkInsExist(id) {
      var index = -1
      for (var i in this.updateForm.instances) {
        if (this.updateForm.instances[i].id === id) {
          index = i
          break
        }
      }
      return index
    },
    checkUserExist(userId) {
      var index = -1
      for (var i in this.updateForm.users) {
        if (this.updateForm.users[i].userId === userId) {
          index = i
          break
        }
      }
      return index
    },
    insCheckExist(id) {
      return this.checkInsExist(id) > -1
    },
    userCheckExist(userId) {
      return this.checkUserExist(userId) > -1
    },
    handleCommand(data) {
      // eval(data)
    },
    disableAlarm(id) {
      this.$confirm('禁用后不再接收报警，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = { id: id, alarmStatus: 0 }
        updateAlarmStatus(data).then(response => {
          this.getAppGroups(1)
        })
      }).catch(() => {
      })
    },
    enableAlarm(id) {
      this.$confirm('是否启用该分组的报警？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = { id: id, alarmStatus: 1 }
        updateAlarmStatus(data).then(response => {
          this.getAppGroups(1)
        })
      }).catch(() => {
      })
    },
    delAppGroup(id) {
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(response => {
          this.getAppGroups(1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        })
      })
    },
    tableRowClassName(row) {
      if (row.groupid && row.groupid !== this.updateForm.id) {
        return 'warning-row'
      }
      return 'info-row'
    },
    handleCurrentChange(currPage) {
      this.apps.currPage = currPage
      this.getAppGroups(currPage)
    },
    handleSizeChange(pageSize) {
      this.apps.pageSize = pageSize
      this.getAppGroups(1)
    },
    insHandleCurrentChange(currPage) {
      this.ins.currPage = currPage
      this.getInstances(currPage)
    },
    insHandleSizeChange(pageSize) {
      this.ins.pageSize = pageSize
      this.getInstances(1)
    },
    userHandleCurrentChange(currPage) {
      this.users.currPage = currPage
      this.getUsers(currPage)
    },
    userHandleSizeChange(pageSize) {
      this.users.pageSize = pageSize
      this.getUsers(1)
    },
    updateAppGroup(id) {
      if (id) {
        this.updateTitle = '修改应用分组'
        for (var a in this.apps.dataArr) {
          if (this.apps.dataArr[a].id === id) {
            this.updateForm = this.apps.dataArr[a]
            break
          }
        }
      } else {
        this.updateForm.id = null
        this.updateTitle = '添加应用分组'
      }
      this.updateDialogVislble = true
    },
    insHandleSelectionChange(val) {
      this.ins.selection = val
    },
    userHandleSelectionChange(val) {
      this.users.selection = val
    },
    insHandleOpen(tag) {
      var index = this.checkInsExist(tag.id)
      if (index < 0) {
        this.updateForm.instances.push(tag)
      }
    },
    userHandleOpen(tag) {
      var index = this.checkUserExist(tag.userId)
      if (index < 0) {
        this.updateForm.users.push(tag)
      }
    },
    insHandleClose(tag) {
      var index = this.checkInsExist(tag.id)
      if (index > -1) {
        this.updateForm.instances.splice(index, 1)
      }
    },
    userHandleClose(tag) {
      var index = this.checkUserExist(tag.userId)
      if (index > -1) {
        this.updateForm.users.splice(index, 1)
      }
    },
    insBatchAdd() {
      for (var k in this.ins.selection) {
        var tag = this.ins.selection[k]
        var index = this.checkInsExist(tag.id)
        if (index < 0) {
          this.updateForm.instances.push(tag)
        }
      }
      this.$refs.insTable.clearSelection()
    },
    userBatchAdd() {
      for (var k in this.users.selection) {
        var tag = this.users.selection[k]
        var index = this.checkUserExist(tag.userId)
        if (index < 0) {
          this.updateForm.users.push(tag)
        }
      }
      this.$refs.userTable.clearSelection()
    },
    insBatchDel() {
      for (var k in this.ins.selection) {
        var tag = this.ins.selection[k]
        var index = this.checkInsExist(tag.id)
        if (index > -1) {
          this.updateForm.instances.splice(index, 1)
        }
      }
      this.$refs.insTable.clearSelection()
    },
    userBatchDel() {
      for (var k in this.users.selection) {
        var tag = this.users.selection[k]
        var index = this.checkUserExist(tag.userId)
        if (index > -1) {
          this.updateForm.users.splice(index, 1)
        }
      }
      this.$refs.userTable.clearSelection()
    },
    /* queryURLs(kw, cb) {
      var keywordQuery = { column: 'url', plat: this.selectedPlat, keyword: kw }
      const res = []
      queryKeywords(keywordQuery).then(response => {
        if (response.data.keywords) {
          response.data.keywords.forEach(function(ele) {
            res.push({ value: ele })
          })
          cb(res)
        }
      }).catch(_ => {
      })
    },
    queryTags(kw, cb) {
      var keywordQuery = { column: 'tag', plat: this.selectedPlat, keyword: kw, ids: this.selectedIds }
      const res = []
      queryKeywords(keywordQuery).then(response => {
        response.data.keywords.forEach(function(ele) {
          res.push({ value: ele })
        })
        cb(res)
      }).catch(_ => {
      })
    },*/
    cleanData() {
      this.$refs.insTable.clearSelection()
      this.$refs.userTable.clearSelection()
      this.ins.type = ''
      this.ins.searchName = ''
      this.users.searchName = ''
      this.updateForm = {
        name: '',
        alarmStatus: 1,
        dutyName: '',
        users: [],
        instances: [],
        contactIds: [],
        alarmTempletIds: []
      }
    },
    colseDialog(done) {
      this.$confirm('改动未保存,是否关闭？')
        .then(_ => {
          this.cleanData()
          done()
        })
        .catch(_ => {})
    },
    cancelSubmit(formName) {
      var _this = this
      const done = function() {
        _this.cleanData()
        _this.updateDialogVislble = false
      }
      this.colseDialog(done)
    },
    creatSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var loadId = Loading.service({ text: '正在保存' })
          var jsonData = this.updateForm
          jsonData.userIds = []
          jsonData.instanceIds = []
          this.updateForm.users.forEach(function(item) {
            jsonData.userIds.push(item.userId)
          })
          this.updateForm.instances.forEach(function(item) {
            jsonData.instanceIds.push(item.id)
          })
          jsonData.users = []
          jsonData.instances = []
          var _this = this
          const resetTable = function() {
            _this.updateDialogVislble = false
            _this.cleanData()
            _this.getAppGroups(_this.apps.currPage)
            _this.getInstances(1)
            _this.getUsers(1)
          }
          if (this.updateForm.id) {
            update(jsonData).then(response => {
              loadId.close()
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              })
              resetTable()
            }).catch(_ => {
              loadId.close()
            })
          } else {
            save(jsonData).then(response => {
              loadId.close()
              this.$message({
                showClose: true,
                message: '保存成功！',
                type: 'success'
              })
              resetTable()
            }).catch(_ => {
              loadId.close()
            })
          }
        }
      })
    }
  }
}
</script>


<style lang="scss">
.el-table .warning-row {
    background: #dd9999;
}
.el-table .info-row {
    background: #c9e5f5;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}

.aar-gap-line{height:0;border-bottom:1px dotted #888888;display:inline-block;width:100%;}
.aar-gap-index{background:#0099cc;position:absolute;left:0;top:0;width:40px;height:40px;color:#fff;border-radius:20px;text-align:center;line-height:40px;}
.aar-gap{position:relative;height:50px;}
.aar-gap-title{margin-left:15px;font-weight:bold;font-size:20px;position:absolute;left:40px;top:12px;background:#fff;padding-right:8px;}
.aar-gap-line-c{height:40px;margin:0 0 0 120px;line-height:38px}
.aar-gap-line-b{height:40px;line-height:38px}
.instanceTypeClass .el-select{width:800px;}
.delBtn{font-weight:bold;font-size:13px;position:absolute;right:0px;top:8px;background:#fff;}
</style>


